<template>
    <Layout class="layout">
         <Sider :style="{overflowY:'auto',overflowX:'hidden',height: 'calc(100vh - 64px)', background: '#dddee4'}" ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
                <div :class="changeIcon">
                    <Icon style="color: #757575" @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" color="white" type="ios-menu-outline" size="24"></Icon>
                </div>
                <Menu style="background: #dddee4" ref="modularMenu" theme="dark" width="auto" accordion=accordion :open-names="selectMenu" @on-select="routeTo" :class="menuitemClasses">
                    <!-- 展开并且有子菜单 -->
                    <Submenu v-if="!isCollapsed && item.children.length"
                        :name="item.id" :key="index" v-for='(item, index) in menudata' >
                        <template slot="title">
                            <i :class="item.iconCode"/>
                            {{item.title}}
                        </template>
                        <MenuItem style="background-color: #cacad1" :key="j" v-for="(i,j) in item.children" :name="i.menuUrl" >
                            {{i.menuName}}
                        </MenuItem>
                    </Submenu>
                    <!-- 展开但没有子菜单 -->
                    <MenuItem v-else-if="!isCollapsed" v-bind:key="index">
                        <i :class="item.iconCode"/>
                        <span>{{ item.title }}</span>
                    </MenuItem>
                    <!-- 不展开有子菜单 -->
                    <Dropdown v-else-if="isCollapsed && item.children.length" v-bind:key="index" placement="right-start" style="z-index: 999999;" class="menu-dropdown">
                    <MenuItem :name="item.id">
                        <i :class="item.iconCode"/>
                        <span>{{ item.title }}</span>
                    </MenuItem>
                    <DropdownMenu slot="list">
                        <DropdownItem v-for="(children, index) in item.children" :key="index" style="padding: 0 0; background-color:#cacad1;z-index: 999999;">
                            <MenuItem :name="children.menuUrl">{{ children.menuName }}</MenuItem>
                        </DropdownItem>
                    </DropdownMenu>
                    </Dropdown>
                    <!-- 不展开无子菜单 -->
                    <Tooltip v-else-if="isCollapsed" :content="item.title" placement="right" v-bind:key="index">
                        <MenuItem :name="item.menuUrl">
                        <i :class="item.iconCode"/>
                        <span>{{ item.title }}</span>
                        </MenuItem>
                    </Tooltip>
                </Menu>
        </Sider>
        <Content :style="{padding: '0',  background: '#f3f4f8', height: 'calc(100vh - 64px)'}">
            <iframe v-show="iframeShow" :src="iframeURL" style="height: 100%;width: 100%;padding: 0 1%;overflow-x:hidden;overflow-y: scroll;" ></iframe>
            <Card dis-hover style="margin: 10px;overflow-x:auto;">
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive&&isRouterAlive" v-show="!iframeShow" @refreshTodo="refreshTodo" @refreshNotice="refreshNotice" :key="key"/>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive&&isRouterAlive" v-show="!iframeShow" @refreshTodo="refreshTodo" @refreshNotice="refreshNotice"/>
            </Card>
        </Content>
    </Layout>
</template>

<script>
    import {sessionStorage} from "../../common/cacheUtils";
    import CryptoJS from "crypto-js";

    export default {
        name: "modular",
        data(){
            return{
                activeName: "",
                iframeShow:false,
                isCollapsed: false,
                iframeURL: "",
                height: 0,
                accordion: true,
                isRouterAlive:true,
                menudata: [],
                selectMenu: []
            }
        },
        watch: {
            $route(){
				this.showMenu();
			},
            selectMenu(){
                this.$refs.modularMenu.$children.forEach((item)=>{
                    item.opened = false;
                });
                this.activeName = "";
            }
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            changeIcon () {
                return [
                    'menu-icon',
                    !this.isCollapsed ? 'change-icon' : ''
                ];
            },
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            },
            key() {
                return this.$route.fullPath;
            }
        },
        mounted:function(){
            this.activeName = "";
            this.showMenu();
        },
        methods: {
            reload(){
                this.isRouterAlive = false
                this.$nextTick(function () {
                    this.isRouterAlive = true
                })
            },
            collapsedSider () {
                this.$refs.side1.toggleCollapse();
            },
            showMenu(){
                let id = this.$route.query.id;
                if(this.$route.query.fastMenu)
                    this.activeName = this.$route.query.fastMenu;
                if(id != undefined){
                    let menu = sessionStorage('menu').getObject('menu')[id];
                    if(menu != undefined){
                        let children = menu.children;
                        this.menudata = [];
                        if(children != null){
                            children.map((item,i)=>{
                                let arr = {
                                    title: item.menuName,
                                    id: item.menuId,
                                    children: [],
                                    iconCode: 'iconfont icon' + item.iconCode
                                };
                                if(item.children != null){
                                    item.children.map((item2,j)=>{
                                        if(this.activeName == ""){
                                            this.activeName = item2.menuUrl;
                                        }
                                        let modular = {
                                            menuName: item2.menuName,
                                            menuUrl: item2.menuUrl,
                                        }
                                        arr.children.push(modular);
                                    });
                                }
                                this.menudata.push(arr);
                                // this.$router.push({path:this.activeName}).catch(error=>console.log(error));
                            })
                            let mapQuery =this.$route.query.params
                            if (mapQuery) {
                                this.$router.push({path:this.activeName,query:mapQuery?mapQuery:{}}).catch(error=>console.log(error));
                            } else {
                                this.$router.push({path:this.activeName}).catch(error=>console.log(error));
                            }
                        }
                        this.selectMenu = ['0']
                    }
                }
            },
            routeTo(e){
                if(e == '/monitoringOA'){
                    window.open('http://111.198.60.98:6083?LoginFlag=Ah&UserName=sa&Pwd=123456&Aes=6e5df8458ccdb2205501b5f90edc06f684e8114a9984f946fb8c8261bf8d3fdd', '_blank')
                    return;
                }
                //水泥系统单点登录跳转
                if(e == '/cementOA'){
                    window.open('http://10.0.60.28:8089/DataWindow/ssoHuanbao/auth?loginFlag=' + sessionStorage('userId').getObject('userId').loginId +'&pwd=4fqgVm7tvLIBJ6tdrAcOFg==', '_blank')
                    return;
                }
                //水泥系统
                if(e == '/cementSys'){
                    window.open('https://10.0.65.90:8888/#/index?'+ this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId +":pwd=JYjt@richfit_202") , '_blank')
                    return;
                }
                //冀东发展
                if(e == '/JidongDevelopment'){
                    window.open('http://10.132.6.10:8086/safe/index.html#/video?'+ this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId +":pwd=JYjt@richfit_202") , '_blank')
                    return;
                }
                //投资物业视频监控
                if(e == '/TZWYVideoSurveillance'){
                    window.open('http://111.203.156.1:1733/jinyu-web/?'+ this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId +":pwd=JYjt@richfit_202") , '_blank')
                    return;
                }
                //天津建材
                if(e == '/tianjinBuildingMaterial'){
                    window.open('http://aq.ctbmg.com:8064/scmp/index.html#/safe/video?'+ this.encrypt("logFlag=" + sessionStorage('userId').getObject('userId').loginId +":pwd=JYjt@richfit_202") , '_blank')
                    return;
                }
                if(e.indexOf("dologin.html") != -1){
                    this.iframeShow = true;
                    let loginId = sessionStorage('userId').getObject('userId').loginId;
                    this.iframeURL = e + "?accountName="+loginId;
                }else{
                    this.iframeShow = false;
                    this.$router.push(e);
                }
            },
            refreshTodo(){
                this.$emit("refreshTodo");
            },
            refreshNotice(){
                this.$emit("refreshNotice");
            },
            encrypt(word){
                let keyHex = CryptoJS.enc.Utf8.parse('bbmg_BBMG');
                let option = {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}
                let encrypted = CryptoJS.DES.encrypt(word, keyHex, option)
                return encrypted.ciphertext.toString()
            },
        }
    }
</script>

<style scoped>
    .layout{
        width: 100vm;
    }

    .rotate-icon{
        transform: rotate(-90deg);
    }
    .change-icon{
        padding-left: 130px;
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
    }
    .rotate-icon{
        transform: rotate(-90deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 0.9rem;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover {
        color: #000000;
        background: #cacad1!important;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
        border-right: none;
        color: #fff;
        background: #E53935!important;
    }

    .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-submenu-title {
        color: #757575;
    }
   .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-submenu-title:hover {
        color: #000000;
        background: #dddee4;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened >>>.ivu-menu-submenu-title {
        color: #757575;
        background: #dddee4;
    }
    .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover{
        color: #333333;
        background: #fff;
    }

    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover{
        background: rgb(221, 222, 228);
    }
</style>
